<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>店铺评价</title>
	<link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
	<link rel="stylesheet" type="text/css" href="__CSS__/aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/dropload.css" />
	<style>
		body {
			background-color: #fff;
			outline: 0;
		}
    .comment{
      /*height:3.325rem;*/
      margin-left:0.5rem;
      margin-right:0.5rem;
      padding-top:0.8rem;
      padding-bottom: 0.5rem;
    }
    .avatar {
      width: 2.325rem;
      height: 2.325rem;
      border-radius: 50%;
      margin-right: 0.6rem;
    }
    .avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .nickname {
			font-size: 13px;
			color: #555;
			padding-bottom: 6.5px;
		}

		.phone {
			font-size: 12px;
			color: #B7B7B7;
		}
    .xing{
      width:0.55rem;
      height:0.55rem;
      background: url(__IMG__/star3.png) no-repeat center center;
      background-size: 0.55rem;
      margin-right:3.5px;
    }
    .xing1{
      width:0.55rem;
      height:0.55rem;
      background: url(__IMG__/star4.png) no-repeat center center;
      background-size: 0.55rem;
      margin-right:3.5px;
    }
	</style>
</head>

<body>
<div class="upOrDown">
  <div class="upOrDown_data">
    {volist name='pl' id='p'}
    <div class="comment flex-wrap underLine">
      <div class="avatar">
        <img src="{$p.user_image ?? '__IMG__/avatar.png'}">
      </div>
      <div class="flex-con">
        <div class="nickname aui-ellipsis-1">{$p.user_username ?? ''}</div>
        <div class="phone">{$p.user_phone|substr=0,3}****{$p.user_phone|substr=7,4}</div>
      </div>
      <div class="star flex-wrap">
        {for start='0' end="$p['comment_score']"}
        <div class="xing"></div>
        {/for}
        {for start='0' end="5-$p['comment_score']"}
        <div class="xing1"></div>
        {/for}
      </div>
    </div>
    {/volist}
  </div>
</div>
<input type="hidden" id="s_id" value="{$s_id}" />
</body>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript" src="__JS__/dropload.min.js"></script>
<!--<script type="text/javascript" src="__JS__/layer_mobile/layer.js"></script>-->
<script type="text/javascript">
    var page = 1;
    /**
     * 上拉加载，下拉刷新
     */
    var dropload = $('.upOrDown').dropload({
        scrollArea : window,
        autoLoad : true,
        loadDownFn : function(me){
            var sid = $('#s_id').val();
            page++;
            $.ajax({
                url:'{:url("Index/shopCommList")}',
                data:'page='+page+'&s_id=' + sid+'&ajax=1',//
                type:'POST',
                dataType:'JSON',
                success: function(data){
                    var arrLen = data.msg.length;
                    if(arrLen<=0){

                        me.lock();
//                         无数据
                        me.noData(true);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }else{
                        var datas = data.msg;
                        $.each(datas,function(key,v){
                            var xing = '';
                            for(var i=1;i<=5;i++){
                                if(i<=v.comment_score){
                                    xing += '<div class="xing"></div>';
                                }else{
                                    xing += '<div class="xing1"></div>';
                                }
                            }
                            if(!v.user_image){
                                v.user_image = '__IMG__/avatar.png';
                            }
                            $(".upOrDown_data").append('' +
                                '<div class="comment flex-wrap underLine">' +
                                '<div class="avatar">' +
                                '<img src="'+v.user_image+'"></div>' +
                            '<div class="flex-con">' +
                            '<div class="nickname aui-ellipsis-1">'+v.user_username+'</div>' +
                            '<div class="phone">'+v.user_phone.substring(0,3)+'****'+v.user_phone.substring(7,11)+'</div>' +
                            '</div>' +
                                '<div class="star flex-wrap">' +
                            xing+
                            '</div>' +
                            '</div>');
                        });
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadUpFn : function(me){
            page = 1;
            var sid = $('#s_id').val();
            $.ajax({
                url:'{:url("Index/shopCommList")}',
                data:'page='+page+'&s_id=' + sid+'&ajax=1',
                type:'POST',
                dataType:'json',
                success: function(data){
                    $('.upOrDown_data').empty();//
                    var datas = data.msg;
                    $.each(datas,function(key,v){
                        var xing = '';
                        for(var i=1;i<=5;i++){
                            if(i<=v.comment_score){
                                xing += '<div class="xing"></div>';
                            }else{
                                xing += '<div class="xing1"></div>';
                            }
                        }
                        if(!v.user_image){
                            v.user_image = '__IMG__/avatar.png';
                        }
                        $(".upOrDown_data").append('' +
                            '<div class="comment flex-wrap underLine">' +
                            '<div class="avatar">' +
                            '<img src="'+v.user_image+'"></div>' +
                            '<div class="flex-con">' +
                            '<div class="nickname aui-ellipsis-1">'+v.user_username+'</div>' +
                            '<div class="phone">'+v.user_phone.substring(0,3)+'****'+v.user_phone.substring(7,11)+'</div>' +
                            '</div>' +
                            '<div class="star flex-wrap">' +
                            xing+
                            '</div>' +
                            '</div>');
                    });
                    me.resetload();
                    me.unlock();
                    me.noData(false);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    me.resetload();
                }
            });
        }
    });

</script>

</html>
